<template>
    <div class="bar-x" ref="bar-x"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
            chartBarX: null,
            option: {
                title: {
                    text: '▎地区销售排行',
                    textStyle: {
                        color: 'white',
                    },
                    left: '3%',
                    top: '5%'
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true
                    }
                },
                series: {
                    data: [],
                    itemStyle: {
                        borderRadius: [20, 20, 0, 0],
                        color: (params) => {
                            if (params.value >= 300) {
                                return new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1, // 渐变方向 (x0, y0, x1, y1)
                                    [
                                        { offset: 0, color: '#52E476' },
                                        { offset: 1, color: '#0DAA2E' }
                                    ]
                                )
                            } else if (params.value >= 200) {
                                return new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        { offset: 0, color: '#2CD3D4' },
                                        { offset: 1, color: '#2E75C0' }
                                    ]
                                )
                            } else {
                                return new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        { offset: 0, color: '#5553EE' },
                                        { offset: 1, color: '#A46CE6' }
                                    ]
                                )
                            }
                        }
                    },
                    type: 'bar',
                },
                grid: {
                    top: '35%',
                    right: 20,
                    bottom: '5%',
                    left: 20,
                    containLabel: true // 确保坐标轴标签包含在内
                },
                textStyle: {
                    color: '#aaa'
                },
                barWidth: '40%',
                tooltip: {
                    backgroundColor: 'rgba(0,0,0,.5)',
                    textStyle: {
                        color: 'white'
                    }
                }
            },
            ws: null,
            page: 0
        }
    },
    methods: {
        getData() {
            // ws 常连接(实时双向通信)
            // 创建实例
            this.ws = new WebSocket('ws://127.0.0.1:9998')
            // 连接
            this.ws.onopen = () => {
                console.log('连接成功');
                // 连接成功后发送数据
                let params = {
                    action: 'getData',
                    socketType: 'rankData',
                    chartName: 'rank',
                    value: ''
                }
                // 发送
                this.ws.send(JSON.stringify(params))

                // 接收数据
                this.ws.onmessage = (e) => {
                    // console.log(JSON.parse(JSON.parse(e.data).data));
                    // 需要的数据
                    let rank = JSON.parse(JSON.parse(e.data).data)
                    // 数组排序(从大到小)
                    rank.sort((a, b) => b.value - a.value)
                    // console.log(rank);
                    let list = rank.slice(this.page, this.page + 10)
                    // 修改option
                    this.option.xAxis.data = list.map(item => item.name)
                    this.option.series.data = list.map(item => item.value)
                    // 重新绘制
                    this.chartBarX.setOption(this.option)
                    // 页数增加
                    this.page++
                    if (this.page > rank.length - 10) {
                        this.page = 0
                    }
                }
            }
        }
    },
    mounted() {
        this.chartBarX = echarts.init(this.$refs['bar-x'])
        this.getData()
        window.addEventListener('resize', () => {
            this.chartBarX.resize()
        })
    }
}
</script>

<style lang="scss" scoped>
.bar-x {
    height: 100%;
}
</style>